<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>地狗购物网-网页定位导航效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      font-size: 12px;
      line-height: 1.7;
    }
    li {
      list-style: none;
    }
    #content {
      width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    #content h1 {
      color: #0088bb;
    }
    #content .item {
      padding: 20px;
      margin-bottom: 20px;
      border: 1px dotted #0088bb;
    }
    #content .item h2 {
      font-size: 16px;
      font-weight: bold;
      border-bottom: 2px solid #0088bb;
      margin-bottom: 10px;
    }
    #content .item li {
      display: inline;
      margin-right: 10px;
    }
    #content .item li a img {
      width: 230px;
      height: 230px;
      border: none;
    }
    #menu {
      position: fixed;
      top: 100px;
      left: 50%;
      margin-left: 400px;
      width: 50px;
    }
    #menu ul li a {
      display: block;
      margin: 5px 0;
      font-size: 14px;
      font-weight: bold;
      color: #333;
      width: 80px;
      height: 50px;
      line-height: 50px;
      text-decoration: none;
      text-align: center;
    }
    #menu ul li a:hover,
    #menu ul li a.current {
      color: #fff;
      background: #0088bb;
    }
  </style>

<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
  // 得到相应的类的元素
  function getByClassName(obj, cls){
    var elements = obj.getElementsByTagName("*")
    var result = []
    for(var i=0;i<elements.length;i++){
      if(elements[i].className == cls){
        result.push(elements[i])
      }
    }
    return result;
  }
  window.onload = function(){
    window.onscroll = function(){
      // 兼容写法
      var top = document.documentElement?document.documentElement.scrollTo:document.body.scrollTo
      var menus = document.getElementById("menu").getElementsByTagName("a")
      var items = getByClassName(document.getElementById("content"), "item")
    }
  }
</script>
</head>

<body>
  <div id="menu">
    <ul>
      <li><a href="#item1" class="current">1F 男装</a></li>
      <li><a href="#item2">2F 女装</a></li>
      <li><a href="#item3">3F 美妆</a></li>
      <li><a href="#item4">4F 数码</a></li>
      <li><a href="#item5">5F 母婴</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>地狗购物网</h1>
    <div id="item1" class="item">
      <h2>1F 男装</h2>
      <ul>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/1F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item2" class="item">
      <h2>2F 女装</h2>
      <ul>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/2F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item3" class="item">
      <h2>3F 美妆</h2>
      <ul>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/3F.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div id="item4" class="item">
      <h2>4F 数码</h2>
      <ul>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
        <li><a href="#"><img src="images/4F.png" alt="" /></a></li>
      </ul>
    </div>
    <div id="item5" class="item">
      <h2>5F 母婴</h2>
      <ul>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/5F.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
</body>
</html>